<template>
  <!-- 渲染组件 -->
  <component v-if="currentComp" :is="currentComp" :data="props.data" />
</template>
<script lang="ts" setup>
  import type { Component } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { ref, shallowRef, onMounted, watch } from "vue"
  import { componentMap } from "./componentMap"
  import { propTypes } from "/@/utils/propTypes"

  const { notification } = useMessage()
  const currentComp = shallowRef<Component>()
  const props = defineProps({
    // 业务类型
    bizType: propTypes.any,
    data: propTypes.object.def({}),
  })
  onMounted(() => {})

  watch(
    () => props.bizType,
    (bizType) => {
      if (bizType) {
        const comp = componentMap.get(bizType)
        console.log("bizType: ", bizType, "comp", comp)

        if (!comp) {
          notification.error({
            message: "渲染失败",
            description: `尚未注册组件, 业务类型: ${bizType}`,
          })
          return
        }

        currentComp.value = comp
      }
    },
    { immediate: true }
  )
</script>

<style></style>
